<template>
    <p>组合式API写法</p>
    ab:{{ ab }}
    <p></p>
    s:{{ s }}
    <p></p>
    obj{{ obj }}
    <p></p>
    abAddFive:{{ abAddFive }}
</template>
<script setup>
import { ref,reactive,computed,watch  } from 'vue';

const ab =ref(0)
const s =ref("你好")
// //alert(ab)//这样子的弹框是显示不了ab的值的
// alert(ab.value)//这样子的才会显示ab的值
// //alert(s.value)
// ab.value++
// alert(ab.value)//这个操作后ab的值变为1
// //在script标签内要对变量的值操作要XXX.value才能对变量的值进行改变
const obj=reactive({
    name :'李同学',
    age:12
})
// alert(obj.name)
// //用reactive时是不用加.value就可以对数据操作，但只有对象才能用reactive
// //并且在此时加入.value会显示错误
// alert(obj.age)
const abAddFive =computed(
    ()=>{
        return obj.age +9
    }
)
//在computed里面用一个箭头函数（匿名函数）返回计算后的值，
//这个本质上是对一个变量的二次计算,是根据变量当前值来计算的，如果变量值发生变化，其也会跟着变化
watch(ab,(newValue,oldValue)=>(
    console.log ("ab发生了改变"),
    console.log('newvalue',newValue),
    console.log('oldvalue',oldValue)
))
//类似于监听，此时对ab变量进行监听,一旦ab的数据发生改变就会执行回调函数，
//该函数第一个是改变后的新值，第二个是旧值
watch(obj,(newValue,oldValue)=>(
    console.log ("obj发生了改变"),
    console.log('newvalue',newValue),
    console.log('oldvalue',oldValue)
))
//当他监听的是一个对象本身时，它可以知道对象的数据发生了改变，
//但不知道新值与旧值,此时新值与旧值都会打印出变化后的数据
watch(()=>obj.name,(newValue,oldValue)=>(
    console.log ("obj.name发生了改变"),
    console.log('newvalue',newValue),
    console.log('oldvalue',oldValue)
))
//要改变上面的问题就需要watch中指定到具体的对象变量，如obj.name,用一个箭头函数指向
//这样就可以看出新值与旧值的区别
</script>